<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>设置权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="/static/system/css/font.css">
    <link rel="stylesheet" href="/static/system/css/xadmin.css">
    <script type="text/javascript" src="/static/system/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/system/js/xadmin.js"></script>
    <style>
        .my-background-white {
            background-color: #FFFFFF !important;
        }
    </style>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body class="my-background-white">
    <div class="layui-fluid">
        <div class="layui-row">
            <div id="auth-tree"></div>
        </div>
        <div class="layui-row" style="margin-top: 6px;">
            <div class="layui-col-xs4 layui-col-xs-offset1">
                <button class="layui-btn" id="save">保存</button>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'jquery', 'tree', 'element'], function () {
            var tree = layui.tree;
            var $ = layui.jquery;
            var element = layui.element;
            var form = layui.form;
            var auth = '{$role.auth}';

            // 获取节点数据,生成树形
            $.ajax({
                url: "{:url('setAuth')}",
                type: "GET",
                success: function (res) {
                    // console.log(res);

                    tree.render({
                        elem: '#auth-tree'  //绑定元素
                        , data: res
                        , showCheckbox: true
                        , id: 'treeId'
                    });

                    // 勾选节点
                    var authMenuIdArr = auth.split(",");
                    tree.setChecked('treeId', authMenuIdArr);
                }
            });


            // 点击保存
            $("#save").click(function () {
                //获得选中的节点
                var checkData = tree.getChecked('treeId');
                var authMenuIds = extractMenuIdsToString(checkData);
                $.ajax({
                    url: "{:url('setAuth')}",
                    type: "POST",
                    data: {
                        role_id: '{$role.role_id}',
                        authMenuIds: authMenuIds
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload(); //刷新父页面
                                parent.layer.close(index);
                            });
                        } else {
                            layer.alert(res.msg, { icon: 5 });
                        }
                    }
                });
            });


            // 递归找出所有menu_id
            function extractMenuIdsToString(item) {
                let menuIdsString = '';

                function recurse(subItem) {
                    if (Array.isArray(subItem)) {
                        // 如果是数组，递归遍历每个元素
                        subItem.forEach((child) => recurse(child));
                    } else if (typeof subItem === 'object' && subItem !== null) {
                        // 如果是对象，检查 menu_id 属性
                        if (subItem.menu_id !== undefined) {
                            menuIdsString += subItem.menu_id + ',';
                        }
                        // 递归遍历对象的每个属性
                        Object.values(subItem).forEach((value) => recurse(value));
                    }
                }

                recurse(item); // 开始递归

                // 移除字符串末尾的逗号
                if (menuIdsString.length > 0) {
                    menuIdsString = menuIdsString.slice(0, -1);
                }

                return menuIdsString;
            }


        });
    </script>
</body>

</html>